<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>停车场导航</title>
    <link rel="stylesheet" href="lib/leaflet.css" type="text/css">
    <link rel="stylesheet" href="css/map.css" type="text/css">
    <script src="lib/leaflet.js"></script>
    <script src="lib/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="map"></div>
<button onclick="test()" style="position: absolute;right: 0;top: 0">导航演示</button>
<script src="js/map.js"></script>
<script>
    //点击地图计算路径
    var point = [];
    map.on("click", function (e) {
        if (point.length > 1) {
            point = [];
            clear();
        }
        point.push(e.latlng);
        var marker = L.marker(e.latlng).addTo(map);
        marker.isPath = true;
        if (point.length > 1) {
            queryPath(point)//查询路径并绘制
        }
    })

    function test() {
        $.get("data/test.json", function (data, status) {
            if (status === "success") {
                var style = {
                    weight: 2,
                    color: "#FF0000",
                    fillColor: "#FFA07A",
                    zIndex: 4
                };
                data.features.forEach(function (feature) {
                    var latLngs = getCoordinate(feature.geometry.paths[0]);
                    var i = 0;
                    var end = latLngs.length - 1;
                    var point_end={lat:latLngs[end][0],lng:latLngs[end][1]};


                    navigation();
                    function navigation() {
                        clear();
                        if (i < end) {
                            var point_start={lat:latLngs[i][0],lng:latLngs[i][1]};
                            var marker1 = L.marker(point_start).addTo(map);
                            marker1.isPath = true;
                            var marker2= L.marker(point_end).addTo(map);
                            marker2.isPath = true;
                            queryPath([point_start,point_end]);
                            i+=4;
                            setTimeout(navigation, 300);
                        }
                    }
                });
            }
        });
    }
</script>
</body>
</html>